<template>
    <div>
        <h3>当前最新的值为-->{{count}}</h3>
         <h3>当前最新的count的值为-->{{this.$store.state.count}}</h3>
         <h3>{{this.$store.getters.shownum}}</h3>
         <h3>{{shownum}}</h3>
        <button @click="handle">+1</button>
        <button @click="handle1">-3</button>
         <button @click="handle2">-1</button>
          <button @click="handle3">+3</button>
          <button @click="handle4">异步+1 </button>
          <button @click="handle5">异步+3 </button>
          <button @click="addNasync(3)">异步+3 </button>
    </div>
</template>
<script>
import {mapState,mapMutations,mapActions,mapGetters} from 'vuex'
export default {
    computed:{
        ...mapState(['count']),//当你需要用到vuex里面多种全局变量的时候就需要这种方式
        ...mapGetters(['shownum'])
    },

    methods:{
        ...mapMutations(['sub1','add1']), //当你需要使用vuex中多个方法时  就调用这个方法
        ...mapActions(['addNasync']),

         handle(){
            //this.$store.state.count++ //在实际开发中不能这样直接操作vuex中的数据
            this.$store.commit('add')
        },
         handle1(){
            //  commit的作用就是调用某个mutations里面的函数
             this.$store.commit('sub',3)
         },
         handle2(){
             this.sub1()
         },
         handle3(){
             this.add1(3)
         },
         handle4(){
            //  这里的dispatch()函数 专门用来触发action
             this.$store.dispatch('addAsync')
         },

         handle5(){
             this.$store.dispatch('addNasync',3)
         },
        
    }
}
</script>